﻿import QtQuick 2.12
import QtGraphicalEffects 1.13

Item {

    id: root
    property real percentage: 0
    property color color_background: "#F4F4F4"
    property color color_bar: image_background===""?config.themeColor : "transparent"
    property color color_circle: "white"
    property color color_circle_border: color_bar

    property int direct: 0              // 0:横向  1:竖向模式

    // 滑块可设置背景图片
    property string image_background: ""
    property string image_bar: ""

    property bool isHovered: circle.isHovered || mouseArea_bar.isHovered

    height: direct === 0 ? 10*dp : 120*dp
    width: direct === 0 ? 200*dp : 10*dp



    Rectangle{      // 底层bar
        id: rect_bg
        height: root.height
        width: root.width
        radius: Math.min(height, width) * 0.5
        color: color_background
        border.color: Qt.rgba(0, 0, 0, 0.05)
        clip: true
        CustomImage{
            id: image1
            anchors.fill: parent
            visible: false
            source: image_background
        }
        Rectangle{
            id: mask
            radius: rect_bg.radius
            visible: false
            color: "black"
            anchors.fill: parent
        }
        OpacityMask{        // 图像圆角
            visible: image_background !== ""
            anchors.fill: parent
            source: image1
            maskSource: mask
        }

    }
    Rectangle{          // 上层bar
        id: bar
        height: direct === 0 ? root.height : percentage*root.height
        width: direct === 0 ? percentage*root.width : root.width
        y: root.height - height
        radius: Math.min(height, width) * 0.5
        color: color_bar
        CustomImage{
            anchors.fill: parent
            visible: image_bar !== ""
            source: image_bar
        }
    }

    MouseArea{
        id: mouseArea_bar
        property bool isHovered: false
        property bool isPressed: false
        width: parent.width + (direct===0?0:4*dp)
        height: parent.height + (direct===0?4*dp:0)
        y: direct===0 ? -2*dp : 0
        x: direct===0 ? 0 :-2*dp
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onEntered: {
            mouseArea_bar.isHovered = true
        }onExited: {
            mouseArea_bar.isHovered = false
        }
        onPressed: {
            var mousePos = mapToItem(this, mouseX, mouseY)
            percentage = direct === 0 ? mousePos.x / this.width : (1-mousePos.y/this.height)
            mouseArea_bar.isPressed = true
        }onReleased: {
            mouseArea_bar.isPressed = false
        }onPositionChanged: {
            if(!mouseArea_bar.isPressed) return
            var mousePos = mapToItem(this, mouseX, mouseY)
            mousePos.x = Math.max(0, Math.min(width, mousePos.x))
            mousePos.y = Math.max(0, Math.min(height, mousePos.y))
            percentage = direct === 0 ? mousePos.x / this.width : (1-mousePos.y/this.height)
        }
    }
    Rectangle{
        id: circle
        property bool isHovered: false
        property bool onPressed: false
        height: Math.min(root.height, root.width) * (this.isHovered ? 1.6 : 1.4) + 6*dp
        width: height
        radius: height * 0.5
        y: direct===0 ? (root.height - height) * 0.5 : (1-percentage)*root.height - height*0.5
        x: direct===0 ? percentage*parent.width - width * 0.5 : (root.width-width)*0.5
        color: color_circle
        border.color: color_circle_border
        border.width: 1.2*dp
        MouseArea{
            anchors.fill: parent
            hoverEnabled: config.hoverEnabled
            onEntered: {
                circle.isHovered = true && config.hoverEnabled
            }onExited: {
                circle.isHovered = false
            }
            cursorShape: Qt.PointingHandCursor
            onPressed: {
                circle.onPressed = true
                var mousePos = mapToItem(root, mouseX, mouseY)
                percentage = direct === 0 ? mousePos.x / root.width : (1-mousePos.y/root.height)
            }onPositionChanged: {
//                console.log("onPositionChanged")
                if(!circle.onPressed){
                    return
                }
                var mousePos = mapToItem(root, mouseX, mouseY)
                mousePos.x = Math.max(0, Math.min(root.width, mousePos.x))
                mousePos.y = Math.max(0, Math.min(root.height, mousePos.y))
                percentage = direct === 0 ? mousePos.x / root.width : (1-mousePos.y/root.height)
            }onReleased: {
                circle.onPressed = false
            }

        }
    }



}
